<script setup lang="ts">
import router from '@/router';
//接收父组件传过来的值
const props = defineProps<{
  title?:string
  rightText?:string
  back?:()=>void
}>()

//子向父传值
const emit = defineEmits<{
  'click-right':[] 
}>()
//点击右边的文字时触发
const onClickRight = () =>{
  emit('click-right')
}

//点击左侧的返回按钮
const onClickLeft=()=>{
  if(props.back){
    return props.back()
  }
  //判断历史记录中是否可以回退
    if(history.state?.back){
      router.back()
    }else{
      router.push('/')
    }
}

</script>

<template>
    <van-nav-bar  left-arrow  fixed  :right-text="rightText" @click-left="onClickLeft" @click-right="onClickRight" :title="title"/>
</template>

<style lang="scss" scoped>
//在样式中，使用:deep()选择器，可以修改组件的样式
:deep() {
  .van-nav-bar {
    &__arrow {
      font-size: 18px;
      color: var(--cp-text1);
    }
    &__text {
      font-size: 15px;
    }
  }
}
</style>